<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">志愿者审核</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card class="box-card">
            <!-- 栅格 -->
            <el-row :gutter="20">
                <!-- 栅格 -->
                <el-row :gutter="20">
                    <el-col :span="14">
                        <!-- 输入框里的值变蓝色   原因：你写的value属性的绑定值是对象，在规定中只能value的值只能是boolean / string / number这三种类型，所以要加上value-key属性， -->
                        <el-select class="selectright" v-model="value1" placeholder="请选择" clearable value-key="id" size="small">
                            <el-option v-for="item in dropdown1" :key="item.id" :label="item.fullname" :value="item">
                            </el-option>
                        </el-select>
                        <el-select class="selectright" v-model="value2" placeholder="请选择" clearable value-key="id" size="small">
                            <el-option v-for="item in dropdown2" :key="item.id" :label="item.fullname" :value="item">
                            </el-option>
                        </el-select>
                        <el-button type="primary" size="mini" @click="Batchapproval">批量审核</el-button>
                    </el-col>
                    <el-col :span="10">
                        <el-input placeholder="关键词" v-model="auditdata" class="input-with-select" clearable
                            @clear="delgetaudit">
                            <el-button slot="append" icon="el-icon-search" @click="searchtext"></el-button>
                        </el-input>
                    </el-col>
                </el-row>
            </el-row>
            <!-- 表格 -->
            <el-table class="tabletop" :border="true" :data="audittableData" style="width: 100%" ref="table">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="name" label="用户名">
                </el-table-column>
                <el-table-column prop="mobile" label="手机号">
                </el-table-column>
                <el-table-column label="头像">
                </el-table-column>
                <el-table-column label="地区">
                    <template slot-scope="scope">
                        {{ `${scope.row.province}-${scope.row.city}-${scope.row.region}` }}
                    </template>
                </el-table-column>
                <el-table-column prop="credit" label="状态">
                    <template slot-scope="scope">
                        {{ scope.row.status == '1' ? '已审核' : '未审核' }}
                    </template>
                </el-table-column>
                <el-table-column label="创建时间">
                    <template slot-scope="scope">
                        {{ scope.row.ctime | dataFilter }}
                    </template>
                </el-table-column>
                <el-table-column label="是否成为管理员">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.isadmin == '1'">是</el-tag>
                        <el-tag color="#f7f7f7" type="info" v-else>否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" @click="toexamine(scope.row.id)">审核</el-button>
                        <el-button size="mini" type="danger" @click="delauditfun(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="auditlist._page" :page-sizes="[10, 20, 30, 40]" :page-size="auditlist._size" background
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import { GetauditList, DropUserList, Toexamine, Delaudit } from '../api/User-audit.js'
export default {
    data() {
        return {
            // 搜索框绑定数值
            auditdata: '',
            // 数据存储
            audittableData: [],
            // 分页器绑定的请求数据
            auditlist: {
                _orderd: 'ctime',
                _page: 0,
                _size: 10,
                status: 0,
                // 第一个下拉框里的值
                // city: '',
                // 第二个下拉框里的值
                // region: ''
            },
            searchdata: {},
            // 总条数
            total: 0,
            // 下拉获取的数据
            dropdown1: [],
            dropdown2: [],
            // 第一个下拉框里绑定的值
            selectvalue: '',
            // 下拉请求数据参数
            optionid: {
                id: '370000'
            },
            value1: '',
            value2: ''
        }
    },
    created() {
        this.getaudit()
        this.dropauditList()
    },
    watch: {
        value1(newName, oldName) {
            this.optionid.id = newName.id
            this.dropauditList()
            this.value2 = ''
            this.auditlist.city = newName.fullname
            this.getaudit()
        },
        value2(newName, oldName) {
            this.auditlist.region = newName.fullname
            this.getaudit()
        }
    },
    methods: {
        // 每页条数发生变化时
        handleSizeChange(val) {
            this.auditlist._size = val
            this.getaudit()
        },
        // 页码发生变化时
        handleCurrentChange(val) {
            this.auditlist._page = val
            this.getaudit()
        },
        // 输入框搜索
        searchtext() {
            this.auditlist._search = this.auditdata
            this.getaudit()
        },
        // 输入框里的关闭
        delgetaudit() {
            // 删除对象中的这个
            delete this.auditlist._search
            console.log(this.auditlist);
            this.getaudit()
        },
        // 批量审判
        Batchapproval(){
            // selection 获取选择对象
            console.log(this.$refs.table.selection);
            // 通过 map 遍历选中的数值, 再把 获取到的id 拼接成一个字符串
            const ids = this.$refs.table.selection.map(item => item.id).join(",")
            console.log(ids);
            this.toexamine(ids)
        },
        // 删除
        async delauditfun(row) {
            const confirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if (confirm !== 'confirm') return this.$message.info('已取消')
            this.delaudit(row.id)
        },
        // 请求区😎😎😎😎😎
        // 列表数据渲染
        async getaudit() {
            const { data } = await GetauditList(this.auditlist)
            console.log(data);
            if (data.code !== 1) return this.$message.error('获取视频管理列表失败')
            // 数据赋值
            this.audittableData = data.list
            // 总条数赋值
            this.total = data.pager.total
        },
        // 下拉列表数据
        async dropauditList() {
            if (this.optionid.id === '370000') {
                const { data } = await DropUserList(this.optionid)
                console.log('下拉1' + data);
                this.dropdown1 = data.list
            } else {
                const { data } = await DropUserList(this.optionid)
                console.log('下拉2');
                console.log(data);
                this.dropdown2 = data.list
            }
        },
        // 审核
        async toexamine(ids){
            const { data } = await Toexamine({ids})
            console.log(data);
            if (data.code !== 1) return this.$message.error('审核失败')
            this.$message.success('审核成功')
            this.getaudit()
        },
        // 删除
        async delaudit(id) {
            const { data } = await Delaudit({ id })
            console.log(data);
            if (data.code !== 1) return this.$message.error('删除失败')
            this.$message.success('删除成功')
            this.getaudit()
        }
    }
}
</script>

<style>

</style>